<template>
    <h1>v-model的双向数据绑定 案例</h1>
    <div>
        <span>用户名：</span> {{ username }}
        <input type="text" v-model="username">
        <span>密码：</span> {{ pwd }}
        <input type="password" v-model="pwd">
    </div>
    <div>
        <span>你的家乡来自哪里：</span> {{ froms }}
        <!-- 下拉菜单要绑定在select上 -->
        <select v-model="froms">
            <option value="北京市">北京</option>
            <option value="南京市">南京</option>
            <option value="天津市">天津</option>
        </select>
    </div>
    <div>
        <!-- (重要)
      遇到复选框, v-model的变量值
      非数组 - 关联的是复选框的checked属性
      数组   - 关联的是复选框的value属性
       -->
        <span>爱好: </span> {{ hobby }}
        <input type="checkbox" v-model="hobby" value="逛街">逛街
        <input type="checkbox" v-model="hobby" value="学习">学习
        <input type="checkbox" v-model="hobby" value="写代码">写代码
    </div>
    <div>
        <span>自我介绍</span> {{  instr }}
        <textarea v-model="instr"></textarea>
    </div>
    <!--修饰符
    .number - 自动将用户输入的值转化为数值类型
    .trim - 自动过滤用户输入的首尾空格
    .lazy - 失去焦点后才更新数据
    -->
    <span>年龄：</span> {{ age }}
    <input  v-model.number="age">
    <span>个人名言</span> {{ str }}
    <input type="text" v-model.trim="str">
    <span>失去焦点</span>{{ str }}
    <input type="text" v-model.lazy="str">
    <!-- v-text 和文本插值表达式一样都是纯文本模式
      和v-html-->
     <p v-text="lol"></p>
     <p v-html="lol"></p>
</template>

<script setup>
import { ref } from 'vue';

const username = ref('萧炎')
const pwd = ref('123456')
const froms = ref('北京市')
const hobby = ref([])
const instr = ref('我是一个java开发者，喜欢编程。')
const age = ref(18)
const str = ref('')
const lol = "<div style='color:red'>v-html和v-text的区别</div>"
</script>

<style lang="scss" scoped>

</style>